<template>
    <div class='otherMember-container'>
        <navcon></navcon>
        <!-- <navsearch></navsearch> -->
        <div class="main">
            <div class="left common">
                <span class="memberInfo-tip">用户信息</span>
                <img class="member-head" :src="memberInfo.header" alt="">
                <ul class="member-info">
                    <li>
                        用户：{{ memberInfo.nickname }}
                    </li>
                    <li>
                        IP：{{ memberInfo.city }}
                    </li>
                    <li>
                        <span v-if="memberInfo.online" style="color: #41b883;">当前在线</span>
                        <span v-if="memberInfo.online == false">
                            用户于 <span style="color: #ff4000">{{ getTime() }}</span> 来过慕阳
                        </span>
                    </li>
                    <li>
                        个性签名：{{ memberInfo.sign }}
                    </li>
                    <li class="interest">
                        <span @click="interest()">添加关注</span>
                    </li>
                    <li class="exchange">
                        <span @click="exchange()">点击聊天</span>
                    </li>
                </ul>
            </div>
            <div class="right common">
                <div class="product-item" v-for="product in productList"
                    :style="product.sellStatus == false ? '' : 'pointer-events: none; cursor: no-drop;'">
                    <div class="no-drop" v-if="product.sellStatus">
                        该商品已经售罄
                    </div>
                    <div class="product-img">
                        <img :title="product.spuTitle" :src="product.spuImage" alt=""
                            @click="goProductDetail(product.spuId)">
                    </div>
                    <div class="product-title" :title="product.spuTitle">
                        {{ product.spuTitle }}
                    </div>
                    <div class="product-price">
                        ￥{{ product.spuPrice }}
                    </div>
                    <div class="option">
                        <div class="detail" @click="goProductDetail(product.spuId)">查看详情</div>
                        <div class="collect" @click="collect(product)">
                            收藏
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <bottom></bottom>
    </div>
</template>

<script>
import navcon from '../../components/navcon.vue';
import navsearch from '../../components/navsearch.vue';
import bottom from "../../components/navbottom.vue"
import getUUID from '../../utils/uuid';
import { timestampToTime } from "../../utils/util"

export default {
    name: 'otherMember',
    data() {
        return {
            memberId: '',
            head: '../../assets/muyang.png',
            productList: [],
            memberInfo: [],
            collectVo: [],
            memberVo: [],   // 使用减少请求次数TODO
        };
    },
    components: {
        navcon,
        navsearch,
        bottom
    },
    methods: {


        getTime() {
            return timestampToTime(this.memberInfo.lastLoginTime)
        },



        // 点击交流
        async exchange() {
            await this.getMember()
            // 判断用户是否在线
            // if (!this.memberInfo.online) {
            //     this.$message({
            //         type: 'success',
            //         message: '该用户未在线'
            //     })
            //     return;
            // }      

            // 获取用户信息
            await this.getMember()

            // 不能和自己聊天
            if (this.memberVo.id == this.memberId) {
                this.$message({
                    type: 'success',
                    message: '不能和自己聊天哦'
                })
                return;
            }

            // 创建交流的 
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/sendreceive/createSendReceive?memberId=${this.memberVo.id}&beingMemberId=${this.memberId}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    // 前往聊天页面，或者开启小窗口聊天
                    this.$router.push({
                        path: '/member/membersetting/exchange',
                        query: {
                            temp_to: this.memberId,
                            query_params: getUUID()
                        }
                    })
                }
            })



        },


        // 点击关注 
        async interest() {

            this.getMember()

            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberinterest/createInterest?memberId=${this.memberVo.id}&beingMemberId=${this.memberId}`),
                method: 'post'
            }).then(({ data }) => {
                this.$message({
                    type: data.code == 200 ? 'success' : "warning",
                    message: data.message
                })
            })
        },


        // 前往商品详情页
        goProductDetail(spuId) {
            this.$router.push({
                path: '/product/productdetail',
                query: {
                    spuId: spuId,
                    params: getUUID()
                }
            })
        },


        // 收藏商品
        async collect(product) {

            this.getMember()

            this.collectVo.memberId = member.id
            this.collectVo.spuId = product.spuId
            this.collectVo.spuImg = product.spuImage
            this.collectVo.spuName = product.spuTitle
            this.collectVo.price = product.spuPrice
            this.$http({
                url: this.$http.adornUrl("/shitou-member/shitoumember/membercollectspu/createCollect"),
                method: 'post',
                data: this.$http.adornData(this.collectVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '收藏商品成功'
                    })
                } else if (data.code == 402) {
                    this.$router.push({ path: '/member/login' })
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        // 获取用户发布商品
        async getMemberProduct() {
            await this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/spuinfo/getProductByMember"),
                method: 'post',
                data: this.$http.adornData({ id: this.memberId })
            }).then(({ data }) => {
                if (data.code == 200 && data.data != null) {
                    this.productList = data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        /**
         * 获取用户信息
         */
        async getMemberInfo() {
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/member/getPublisher?memberId=${this.memberId}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200 && data.data != null) {
                    this.memberInfo = data.data
                    this.getMemberProduct()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },

        /**
         * 获取用户id
         */
        getMemberId() {
            this.memberId = this.$route.query.memberId
            if (this.memberId == null || this.memberId == '' || this.memberId == undefined) {
                this.$router.go(-1)
            }
            this.getMemberInfo()
        },


        /**
         * 获取用户信息
         */
        async getMember() {
            if (this.memberVo == null || this.memberVo == undefined || this.memberVo.length == 0) {
                let member = await this.$memberInfo()
                if (member == null || member == undefined || member == '') {
                    this.$router.push({ path: '/member/login' })
                    return;
                }
                this.memberVo = member;
            }
        },
    },
    created() {
        this.getMemberId()
    }
}
</script>

<style scoped>
@import url("../../utils/css/othermember.css");
</style>
